import React, { Component } from 'react';
import {
  //AppRegistry,
  View,
  Animated,
  Dimensions,
  TouchableOpacity
} from 'react-native';
//import FadeInView from './FadeInView';
 
const { width, height } = Dimensions.get("window");
 
export default class App extends Component {
 
  constructor(props) {
    super(props)
 
    this.state = {
      securetyTipViewY: new Animated.Value(height),
    }
  }
 
  componentDidMount() {
    this._showTipView()
  }
 
  //展示View
  _showTipView = () => {
    Animated.timing(
      this.state.securetyTipViewY,
      {
        toValue: height - 254 - 64,
        duration: 300,   //动画时长300毫秒
      }
    ).start();
  }
 
 
  //隐藏view
  _hiddenTipView = () => {
    Animated.timing(
      this.state.securetyTipViewY,
      {
        toValue: height,
        duration: 1000,   //动画时长300毫秒
      }).start();
  }
 
  render() {
    return (
      <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} onPress={this._hiddenTipView}>
        <Animated.View style={{ position: "absolute", top: this.state.securetyTipViewY, backgroundColor: 'red', height: 50, width: 300 }}>
          <View style={{ backgroundColor: 'yellow', width: 300, height: 50 }}></View>
        </Animated.View>
      </TouchableOpacity>
    )
  }
}